<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
             :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="24" class="mb20">
          <el-form-item label="前缀" prop="prefix">
            <el-input v-model="form.prefix" placeholder="请输入前缀"/>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="号码段" prop="numberPart">
            <el-input v-model="form.numberPart" placeholder="请输入号码段"/>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="省份代码" prop="provinceCode">
            <el-select v-model="form.provinceCode" placeholder="请选择省份" clearable style="width: 100%">
              <el-option
                  v-for="province in provinceOptions"
                  :key="province"
                  :label="province"
                  :value="province"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="城市代码" prop="cityCode">
            <el-input v-model="form.cityCode" placeholder="请输入城市代码"/>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="运营商编码" prop="ispCode">
            <el-select v-model="form.ispCode" placeholder="请选择运营商" clearable style="width: 100%">
              <el-option label="中国移动" value="CMCC"/>
              <el-option label="中国联通" value="CUCC"/>
              <el-option label="中国电信" value="CTCC"/>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label=" areaCode" prop="areaCode">
            <el-input v-model="form.areaCode" placeholder="请输入 areaCode"/>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label=" postCode" prop="postCode">
            <el-input v-model="form.postCode" placeholder="请输入 postCode"/>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label=" adminCode" prop="adminCode">
            <el-input v-model="form.adminCode" placeholder="请输入 adminCode"/>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="baseBaseAreaNumberDialog">
import {useDict} from '/@/hooks/dict';
import {useMessage} from "/@/hooks/message";
import {getObj, addObj, putObj} from '/@/api/bms/base/baseAreaNumber'
import {rule} from '/@/utils/validate';
// 定义省份选项
const provinceOptions = [
  '山东', '江苏', '安徽', '四川', '陕西', '湖北', '北京', '天津',
  '上海', '广东', '广西', '浙江', '河南', '甘肃', '吉林', '辽宁',
  '内蒙古', '新疆', '黑龙江', '福建', '河北', '重庆', '海南', '江西',
  '山西', '湖南', '青海', '贵州', '宁夏', '云南', '西藏'
];


// 定义城市选项
const cityOptions = {
  '上海': ['上海'],
  '云南': ['临沧','丽江','保山','大理','德宏','怒江','思茅','文山','昆明','昭通','普洱','曲靖','楚雄','玉溪','红河','西双版纳','迪庆'],
  '内蒙古': ['临河','乌兰察布','乌兰浩特','乌海','兴安','兴安盟','包头','呼伦贝尔','呼和浩特','巴彦淖尔','海拉尔','赤峰','通辽','鄂尔多斯','锡林浩特','锡林郭勒','锡林郭勒盟','阿拉善','阿拉善盟','集宁'],
  '北京': ['北京'],
  '吉林': ['吉林','四平','延吉','延边','松原','梅河口','珲春','白城','白山','辽源','通化','长春'],
  '四川': ['乐山','内江','凉山','南充','宜宾','巴中','广元','广安','康定','德阳','成都','成都/眉山/资阳','攀枝花','泸州','甘孜','眉山','绵阳','自贡','西昌','资阳','达川','达州','遂宁','阿坝','雅安'],
  '天津': ['天津'],
  '宁夏': ['中卫','吴忠','固原','石嘴山','银川'],
  '安徽': ['亳州','六安','合肥','安庆','宣城','宿州','池州','淮北','淮南','滁州','芜湖','蚌埠','铜陵','阜阳','马鞍山','黄山'],
  '山东': ['东营','临沂','威海','德州','日照','枣庄','泰安','济南','济宁','淄博','滨州','潍坊','烟台','聊城','莱芜','菏泽','青岛'],
  '山西': ['临汾','吕梁','大同','太原','忻州','晋中','晋城','朔州','运城','长治','阳泉'],
  '广东': ['东莞','中山','云浮','佛山','广州','惠州','揭阳','梅州','汕头','汕尾','江门','河源','深圳','清远','湛江','潮州','珠海','肇庆','茂名','阳江','韶关'],
  '广西': ['北海','南宁','崇左','来宾','柳州','桂林','梧州','河池','玉林','百色','贵港','贺州','钦州','防城港'],
  '新疆': ['乌鲁木齐','伊犁','克孜勒苏','克拉玛依','博乐','博尔塔拉','吐鲁番','和田','哈密','喀什','塔城','奎屯','巴音郭楞','库尔勒','昌吉','石河子','阿克苏','阿勒泰'],
  '江苏': ['南京','南通','宿迁','常州','徐州','扬州','无锡','泰州','淮安','盐城','苏州','连云港','镇江'],
  '江西': ['上饶','九江','南昌','吉安','宜春','抚州','新余','景德镇','萍乡','赣州','鹰潭'],
  '河北': ['保定','唐山','廊坊','张家口','承德','沧州','石家庄','秦皇岛','衡水','邢台','邯郸','雄安'],
  '河南': ['三门峡','信阳','信阳/潢川','南阳','周口','商丘','安阳','平顶山','开封','新乡','洛阳','济源','漯河','濮阳','焦作','红河','许昌','郑州','郑州/开封','驻马店','鹤壁'],
  '浙江': ['丽水','台州','嘉兴','嘉庆','宁波','杭州','温州','湖州','绍兴','舟山','衢州','金华'],
  '海南': ['三亚','海南','海口'],
  '湖北': ['仙桃','仙桃/潜江/天门','十堰','咸宁','孝感','宜昌','恩施','武汉','江汉','潜江','神农架','荆州','荆门','襄阳','鄂州','随州','黄冈','黄石'],
  '湖南': ['吉首','娄底','岳阳','常德','张家界','怀化','株洲','永州','湘潭','湘西','益阳','衡阳','邵阳','郴州','长沙','长沙/株洲/湘潭','长沙/湘潭/株洲'],
  '甘肃': ['临夏','兰州','嘉峪关','天水','定西','平凉','庆阳','张掖','武威','甘南','白银','西峰','酒泉','金昌','陇南'],
  '福建': ['三明','南平','厦门','宁德','泉州','漳州','福州','莆田','龙岩'],
  '西藏': ['山南','拉萨','日喀则','昌都','林芝','那曲','阿里'],
  '贵州': ['六盘水','兴义','凯里','安顺','毕节','贵阳','贵阳/遵义/安顺','遵义','都匀','铜仁','黔东南','黔南','黔西南'],
  '辽宁': ['丹东','大连','抚顺','朝阳','本溪','沈阳','沈阳/铁岭/抚顺/本溪','盘锦','营口','葫芦岛','辽阳','铁岭','锦州','阜新','鞍山'],
  '重庆': ['万州','涪陵','重庆','黔江'],
  '陕西': ['咸阳','商州','商洛','安康','宝鸡','延安','朔州','榆林','汉中','渭南','西安','铜川'],
  '青海': ['共和','德令哈','果洛','格尔木','海东','海北','海南','海晏','海西','玉树','西宁','黄南'],
  '黑龙江': ['七台河','伊春','佳木斯','双鸭山','哈尔滨','大兴安岭','大庆','牡丹江','绥化','鸡西','鹤岗','黑河','齐齐哈尔']
};
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
  id: '',
  prefix: '',
  numberPart: '',
  provinceCode: '',
  cityCode: '',
  ispCode: '',
  areaCode: '',
  postCode: '',
  adminCode: '',
});

// 定义校验规则
const dataRules = ref({
  prefix: [{required: true, message: '前缀不能为空', trigger: 'blur'}],
  numberPart: [{required: true, message: '号码段不能为空', trigger: 'blur'}],
  provinceCode: [{required: true, message: '省份代码不能为空', trigger: 'blur'}],
  cityCode: [{required: true, message: '城市代码不能为空', trigger: 'blur'}],
  ispCode: [{required: true, message: '运营商编码不能为空', trigger: 'blur'}],
  areaCode: [{required: true, message: '不能为空', trigger: 'blur'}],
  postCode: [{required: true, message: '不能为空', trigger: 'blur'}],
  adminCode: [{required: true, message: '不能为空', trigger: 'blur'}],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取baseAreaNumber信息
  if (id) {
    form.id = id
    getBaseAreaNumberData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getBaseAreaNumberData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
